<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import CodeEditor from './CodeEditor.vue';
import CodeView from './CodeView.vue';
import { baseUrl } from '../config';
import { useGetProjectAggregates } from '../composables/useGetProjectAggregates';
import { useGetTemplateList } from '../composables/useGetTemplateList';
import { useGetAggregateInfo } from '@/composables/useGetAggregateInfo';
import { useGenerateAggregateCode } from '@/composables/useGenerateAggregateCode';

const props = defineProps<{
    projectId: number;
}>();

const defineCode = ref('');

const generateCode = ref("// Generated code will appear here");

const { aggregates } = useGetProjectAggregates(baseUrl, { id: props.projectId });
const selectedAggregate = ref('');
const selectedId = computed(() => {
    return aggregates.value.find(aggregate => aggregate.name === selectedAggregate.value)?.id || 0;
});

const { list } = useGetTemplateList(baseUrl);
const selectedTemplate = ref('');
const selectedTemplateId = computed(() => {
    return list.value.find(template => template.name === selectedTemplate.value)?.id || 0;
});

async function fetchAggregateInfo() {
    if (selectedId.value) {
        const { info, fetchInfo } = useGetAggregateInfo(baseUrl, { projectId: props.projectId, aggregateId: selectedId.value });
        await fetchInfo();
        defineCode.value = info.value?.Content || '';
    }
}

async function generateCodePreview() {
    if (selectedId.value && selectedTemplateId.value) {
        const { code, fetchCode } = useGenerateAggregateCode(baseUrl, {
            projectId: props.projectId,
            aggregateId: selectedId.value,
            templateId: selectedTemplateId.value
        });
        await fetchCode();
        generateCode.value = code.value || "// No code generated";
    }
}

watch(
    () => aggregates.value,
    (newAggregates) => {
        selectedAggregate.value = newAggregates[0]?.name || 'EmptyAggregate';
    },
    { immediate: true }
)

watch(
    () => list.value,
    (newList) => {
        selectedTemplate.value = newList[0]?.name || 'DefaultTemplate';
    },
    { immediate: true }
)

watch(
    () => selectedAggregate.value,
    () => {
        fetchAggregateInfo();
    },
    { immediate: true }
);

watch(
    () => defineCode.value,
    () => {
        generateCodePreview();
    },
    { immediate: true }
)


</script>

<template>
    <div class="aggregate-root-list-panel">
        <div class="left-col">
            <div class="define-panel">
                <h2>聚合根定义</h2>
                <div class="aggregate-options">
                    <div>
                        <button type="button">绘图</button>
                        <button type="button">保存</button>
                        <button type="button">删除</button>
                        <select v-model="selectedAggregate">
                            <option v-for="aggregate in aggregates" :key="aggregate.id" :value="aggregate.name">
                                {{ aggregate.name }}
                            </option>
                        </select>
                    </div>
                </div>
                <CodeEditor v-model="defineCode" />
            </div>
        </div>
        <div class="right-col">
            <div class="generate-code">
                <h2>生成代码预览</h2>
                <div class="generate-code-options">
                    <button type="button">复制</button>
                    <select v-model="selectedTemplate">
                        <option v-for="template in list" :key="template.id" :value="template.name">
                            {{ template.name }}
                        </option>
                    </select>
                </div>
                <CodeView :code="generateCode" language="csharp" @copy="$emit('copy')" />
            </div>
        </div>
    </div>
</template>

<style scoped>
.aggregate-root-list-panel {
    display: flex;
    justify-content: space-between;
    height: 100%;
    color: white;
}

.left-col,
.right-col {
    margin: 0 10px;
    height: 100%;
}

.left-col {
    flex: 3;
}

.right-col {
    flex: 4;
}

.aggregate-options,
.generate-code-options {
    margin-bottom: 0px;
}

button {
    color: white;
    font-size: 1rem;
    background-color: #008000;
    border-radius: 5px;
    border: none;
    margin-right: 10px;
    margin-bottom: 10px;
    width: 80px;
    height: 40px;
}

select {
    width: 200px;
    height: 40px;
    font-size: 1rem;
    border-radius: 5px;
    background-color: #272822;
    border: none;
    color: white;
    margin-bottom: 10px;
}
</style>